<template>
	<div class="divwrapper">
		<el-form :inline="true" :model="ruleForm" class="demo-form-inline">
			<el-form-item label="城市：">
			    <el-select v-model="ruleForm.projectCity" filterable >
			        <el-option v-for="item in citys"
			                   :key="item.cityId"
			                   :label="item.city"
			                   :value="item.cityId">
			        </el-option>
			    </el-select>
			</el-form-item>
			<el-form-item label="开发商名称">
				<el-input v-model.trim="ruleForm.projectDevelopersName"></el-input>
			</el-form-item>
			<el-form-item label="创建时间">
                <el-date-picker
                        v-model="time"
                        type="datetimerange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions">
                </el-date-picker>
			</el-form-item>
			<el-form-item label="项目名称">
				<el-input v-model.trim="ruleForm.projectName"></el-input>
			</el-form-item>
			<el-form-item label="项目状态">
				<el-select v-model="ruleForm.projectState">
					<el-option v-for="item in statusList" :label="item.label" :value="item.id" :key="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" >查询</el-button>
				<el-button type="primary" @click="newproject">新建项目</el-button>
				<el-button type="primary" @click="exporthander">导出</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
			<el-table-column prop="projectName" label="项目名称"  align="center"></el-table-column>
			<el-table-column prop="cityName" label="城市" align="center"></el-table-column>
			<el-table-column prop="developerName" label="开发商" align="center"></el-table-column>
			<el-table-column prop="projectCooperationMode" label="合作方式" align="center"></el-table-column>
			<el-table-column prop="projectHouseNum" label="房源数量" align="center"></el-table-column>
			<el-table-column prop="speedProgress" label="项目进度" align="center"></el-table-column>
			<el-table-column prop="projectAmount" label="项目金额(万)" align="center"></el-table-column>
			<el-table-column label="对接人信息" align="center">
                <template slot-scope="scope">
                    {{scope.row.dockedName}},{{scope.row.dockedPhone}}
                </template>
            </el-table-column>
			<el-table-column prop="projectState" label="项目状态" align="center" :formatter="initStatus"></el-table-column>
			<el-table-column prop="creatorName" label="创建人" align="center"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" align="center" :formatter="initTime"></el-table-column>
			<el-table-column  label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="createorder(scope.row)">创建订单</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="项目信息" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="btnhander('look',scope.row)">查看</el-button>
					<el-button type="text" @click="btnhander('edit',scope.row)">编辑</el-button>
					<el-button type="text" :disabled="!scope.row.orgCode" @click="btnhander('del',scope.row)">删除</el-button>
				</template>
			</el-table-column>

		</el-table>


	</div>
</template>
<script>
	import TimeComp from '../../common/timeComp'
	import api from '@/api/apiPath'
	export default {
		components: {TimeComp},
		data(){
			return {
				citys:[],
				tableData:[],
                time:"",
				ruleForm: {
					projectCity:"",
					projectDevelopersName:"",//开发商名称
					createTimeBegin:'',//开始时间
					createTimeEnd:"",
                    projectName:"",
					projectState:"",
					pageNum: 1,
					pageSize: 10,
				},
				statusList:[
                    {id:"",label:'全部'},
					{id:0,label:'未开始'},
					{id:1,label:'进行中'},
					{id:2,label:'已完成'}
				],
				totalSize:0,
                pickerOptions: {
                    shortcuts: [{
                            text: '最近30天',
                            onClick(picker) {
                                    const end = new Date();
                                    const start = new Date();
                                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                    picker.$emit('pick', [start, end]);
                            }
                    }]
                },
			}
		},
        watch:{
                time(val){
                        if(val){
                                 this.ruleForm.createTimeBegin=this.getTimeString(this.time[0]);
                                 this.ruleForm.createTimeEnd=this.getTimeString(this.time[1])
                        }else{
                                this.ruleForm.createTimeBegin=""
                                this.ruleForm.createTimeEnd=""
                        }
                }
        },
		methods:{
            getTimeString (timestamp) {
              if (timestamp) {
                const time = new Date(timestamp)
                let dateStr = ''
                const year = time.getFullYear()
                const month = String(time.getMonth() + 1).length === 1 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
                const day = String(time.getDate()).length === 1 ? '0' + time.getDate() : time.getDate()
                dateStr = year + '-' + month + '-' + day
                let timeStr = ''
                const hours = time.getHours()
                const hh = String(hours).length === 1 ? '0' + hours : hours
                const minutes = time.getMinutes()
                const mm = String(minutes).length === 1 ? '0' + minutes : minutes
                const seconds = time.getSeconds()
                const ss = String(seconds).length === 1 ? '0' + seconds : seconds
                timeStr = `${hh}:${mm}:${ss}`
                // timeStr = `${hh}:${mm}`
                return dateStr + ' ' + timeStr
                // return dateStr
              } else {
                return ''
              }
          },
			loadCity(){
				this.axios.post(api.CITYLIST).then(res => {
					if (res.data.code !== 200) {
						this.$message(res.data.msg)
					}else {
						this.citys = res.data.data.cityList
					}
				})
			},
			loadData(){
                this.axios.post(api.projectManageList,this.ruleForm).then((res)=>{
                    console.log(res);
                }).catch((error)=>{
                    console.log(error);
                })
			},
            initStatus(row, column, cellValue, index){
                if(cellValue==0){
                    return "未开始"
                }else if(cellValue==1){
                    return "进行中"
                }else if(cellValue==2){
                    return "已完成"
                }else{
                    return cellValue
                }
            },
            initTime(row, column, cellValue, index){
                return this.getTimeString(cellValue)
            },
			newproject(){
				this.$router.push({path:'/baseStep1',query:{type:'add'}})
			},
			exporthander(){

			},
			createorder(){

			},
			btnhander(){

			}
		},
		created(){
			 this.loadCity();
             this.loadData();
		}
	}

</script>
<style lang="stylus" scoped>

	.divwrapper
		width: 90%






</style>
